<template>
	<el-dialog v-model="props.show" width="500" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-#000000 font-bold text-18px">
				选择收款方式
			</div>
		</template>
		<template #default>
			<el-scrollbar  height="500px">
				<el-collapse :accordion="true">
					<el-collapse-item v-for="(item, index) in sellList" :key="index">
						<template #title>
							<div class="flex items-center">
								<p :style="{ backgroundColor: item.color }" class="w-4px h-14px"></p>
								<p class="ml-6px text-18px font-bold">{{ item.name }}</p>
							</div>
						</template>
						<div v-for="(card, i) in item.list" :key="i" class=" mt-20px w-100%  border-1px border-dashed border-#E5E6EB rounded-10px box-border p-20px" 
						:class="{'border-#114CEE bg-#EFF3FF' : card.id === selected.id}"
						@click="selectSell(card.id)">
							<div class="flex items-center text-16px">
								<p>持卡人姓名：</p>
								<p>{{ card.user }}</p>
							</div>
							<template v-if="item.name == '银行借记卡'">
								<div class="flex items-center text-16px mt-10px ">
									<p>银行账号：</p>
									<p>{{ card.bank }}</p>
								</div>
							</template>
							<div class="flex items-center text-16px mt-10px">
								<p>银行账号：</p>
								<p>{{ card.account }}</p>
							</div>
						</div>
					</el-collapse-item>
				</el-collapse>
			</el-scrollbar >
		</template>
		<template #footer>
			<div>
				<el-button type="primary" color="#114CEE" @click="select" style="width: 100%;height:50px;font-size: 18px;">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import {ref} from 'vue';

interface IProps {
	show: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close', 'select']);

const sellList = ref<any[]>([
	{
		color: "#1187EE",
		name: "支付宝",
		list: [
			{
				id:1,
				user: "***",
				account: "22272*****2122",
			},
			{
				id:2,
				user: "***",
				account: "1523*****2228",
			}
		]
	},
	{
		color: "#07B175",
		name: "微信",
		list: [
			{
				id:3,
				user: "***",
				account: "22272*****2122",
			},
			{
				id:4,
				user: "***",
				account: "1523*****2228",
			}
		]
	},
	{
		color: "#F6AC57",
		name: "银行借记卡",
		list: [
			{
				id:5,
				user: "***",
				account: "22272*****2122",
				bank: "招商银行 | 罗湖支行"
			},
			{
				id:6,
				user: "***",
				account: "1523*****2228",
				bank: "招商银行 | 罗湖支行"
			}
		]
	}
])

const selected = ref<any>({
	id:'',
	name: '',
	color: '',
	user:'',
	account:'',
	bank:''
});

const selectSell = (id: any) => {
	sellList.value.forEach((item: any) => {
		item.list.forEach((card: any) => {
			if (card.id === id) {
				selected.value.id = card.id;
				selected.value.user = card.user;
				selected.value.account = card.account;
				selected.value.bank = card.bank;
				selected.value.name = item.name;
				selected.value.color = item.name;
			}
		})
	})
}

const close = () => {
	emit('close', false);
}

const select = () => {
	if (selected.value.id == '') {
		emit('select', false);
	} else {
		emit('select', selected.value);
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-collapse-item__wrap,
::v-deep .el-collapse-content-49,
::v-deep .el-collapse-item__header{
	border-bottom:none;
}
::v-deep .el-collapse{
	border-top:none;
}
</style>
